<script lang="ts" setup>
import url from "@/assets/images/nana.webp";
import { CollectionTag } from "@element-plus/icons-vue";
const { image = "", id = 0 } = defineProps<{ image: string; id: number }>();
const select = ref(0);
const change = (value: number) => {
  console.log(value);
};
</script>
<template>
  <div class="waterfall-item">
    <router-link :to="{ name: 'Detail', params: { id } }">
      <el-image :src="image" fit="cover" lazy>
        <template #placeholder>
          <el-image :src="url" fie="contain" />
        </template>
        <template #error>
          <el-image :src="url" />
        </template>
      </el-image>
    </router-link>
    <el-rate
      v-model="select"
      :max="1"
      clearable
      :icons="{ 1: CollectionTag }"
      :void-icon="CollectionTag"
      :colors="['#99A9BF']"
      :void-color="'#ECF0F1'"
      @change="change"
    />
  </div>
</template>
<style lang="scss" scoped>
.waterfall-item {
  display: flex;
  overflow: hidden;
  border-radius: 50px;
  position: relative;
  &::before {
    content: "";
    opacity: 0;
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    display: inline-block;
    background: #0b101766;
    pointer-events: none;
  }
  &:hover::before {
    opacity: 1;
  }
  .el-rate {
    position: absolute;
    // opacity: 0;
    z-index: 100;
    right: 5%;
    bottom: 5%;
  }
}
.waterfall-item:hover .img {
  transition: transform 0.3s ease;
  transform: scale(1.2);
  // border-radius: 50px;
}
.waterfall-item .img {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50px !important;
  vertical-align: bottom;
  width: 100%;
  height: auto;
  object-fit: cover;
  &:hover {
    opacity: 0.9;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
    transition: opacity 0.5s ease; /* 透明度变化动画 */
  }
}
</style>
